<template>
  <div class="main" ref="questionBgk">
    <div class="box-center-all">
      <div class="top-header">
        <div class="left-icon" v-routers="{path:'/'}">
          <van-icon name="arrow-left" />
        </div>
        <div class="label">{{ $t('答题记录') }}</div>
      </div>
      <div class="bottom-box">
        <van-empty v-if="initFinish && lists.length === 0"></van-empty>
        <van-list
            v-else
            v-model:loading="loading"
            :finished="finished"
            :finished-text="$t('没有更多数据了')"
            @load="onLoad"
        >
          <div class="box-item" v-for="(item,index) in lists" :key="index">
            <p class="title">{{ item.content }}</p>
            <p class="timi">
              {{$t('用户名')}} : <b>{{ item.username }}</b>
            </p>
            <p class="timi">
              {{$t('答题时间')}} : <b>{{ item.submitTime }}</b>
            </p>
            <p class="timi" :class="{
              success:item.userChoose===item.correctIndex,
              result:item.userChoose!==item.correctIndex
            }">
              <span class="result" v-if="item.userChoose===item.correctIndex">{{$t('很遗憾')}}</span>
              <span class="success" v-else>{{$t('CONGRATULATIONS')}}</span>
            </p>
          </div>
        </van-list>

      </div>
    </div>
  </div>
</template>

<script>
import {Dialog, Toast} from "vant";
import {answerList, answerRecord, exitAnswer, getQuestionAct, submitAnswers, userDetail} from "@/api/apiFox";

export default {
  data() {
    return {
      formData:{}, //基本信息
      isLogin:false,
      userInfo:{}, //用户信息
      queryParams:{
        pageSize:1,
        pageNum:1,
        questionNum:0
      },
      finished: false,
      loading: false,
      initFinish: false,
      lists: [],
      pageNo: 0,
      count: 0,
    };
  },
  methods:{

    getLists() {
      answerRecord({pageNo: this.pageNo,pageSize:10}).then(res => {
        this.lists = this.lists.concat(res.lists)
        this.initFinish = true
        this.count = res.count
        this.loading = false
      }).catch(err => {})
    },

    onLoad() {
      if(this.pageNo === 0) {
        this.pageNo ++
        this.getLists()
      }else{
        if(this.lists.length < this.count) {
          this.pageNo ++
          this.getLists()
        }else{
          this.finished = true
        }
      }
    },

    getUserInfo() {
      if (this.isLogin) {
        userDetail().then(res => {
          this.userInfo = res
        }).catch(err => {})
      } else {
        this.$router.push('/').catch(err=>{})
      }
    },
  },
  mounted() {


  },
  created() {
    let s = localStorage.getItem('accessKey')
    let d = sessionStorage.getItem('userInfo')
    if (s && d) {
      this.isLogin = true
    } else {
      this.isLogin = false
    }
    this.getUserInfo()
  }
}
</script>

<style scoped lang="scss">
.main{
  font-size: 14px;
  background: url("@/assets/images/bgk.jpg") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  min-height: 100vh;

  .box-center-all{
    width: 100%;
    min-height: 100vh;
    padding-top: 45px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); // 兼容 Safari
    position: absolute;
    .top-header{
      width: 100%;
      position: absolute;
      height: 60px;
      top: 0;
      left: 0;
      background: rgba(44,119,117,0.9);
      pointer-events: auto;
      font-family: 'Fugaz One', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
      .left-icon{
        width: 100px;
        display: flex;
        justify-content: left;
        position: absolute;
        left: 20px;
        pointer-events: auto;
        img{
          height: 20px;
        }
      }
      .label{
        font-size: 18px;
      }
    }
    .bottom-box{
      width: 100%;
      padding-top: 30px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;

      .box-item{
        width: 100%;
        background: #5a918f;
        border-radius: 10px;
        min-height: 100px;
        margin-bottom: 10px;
        padding: 15px;
        box-sizing: border-box;
        .title{
          font-size: 16px;
          color: #ff0000;
          text-shadow: -1px -1px 0 #fff,
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
          1px 1px 0 #fff; // 白色描边
          font-family: 'HFLittleStars', sans-serif;
           margin-bottom: 10px;
        }
        .timi{
          //margin-top: 5px;
          color: #fff;
          font-size: 14px;
          font-family: 'HFLittleStars', sans-serif;
          b{
            //font-family: 'AnimeHug', sans-serif;
            font-size: 16px;
          }
        }
        .result{
          margin-top: 10px;
          font-family: 'AnimeHug', sans-serif;
          color: #ff9e67;
          text-shadow: -1px -1px 0 #fff,
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
          1px 1px 0 #fff; // 白色描边
          & .success{
            color: #ff0000;
          }
        }

      }
    }

  }

  .timrs{
    color: #fff;
    margin-left: 10px;
  }
}
</style>
